<template>
  <a-layout>
    <a-layout-header class="bg-white admin-content-header">
      <div class="col-4 admin-tiao-left"></div>
      <div class="col-8 text-right">
        <el-button-group>
          <el-button @click="dialogVisible = true">添加课程</el-button>
          <el-button @click="dialogVisibless = true">发送短信</el-button>
        </el-button-group>
      </div>
      <el-dialog title="课程列表" :visible.sync="dialogVisible" width="800px">
        <changemodel
          v-bind="{ allData:getCourse, selectDate, clickdata, group: getCatebag , groupdata }"
        ></changemodel>
      </el-dialog>
      <el-dialog title="是否发送短信" :visible.sync="dialogVisibless" width="30%">
        <span>温馨提示：管理员已经为您的[ {{user.username}} ]账号开放新的课程，请在电脑端登录www.hterobot.com网站和我们愉快地学习吧！</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibless = false">取 消</el-button>
          <el-button type="primary" @click="mtmessage">确 定</el-button>
        </span>
      </el-dialog>
    </a-layout-header>
    <a-layout-content class="admin-content-table">
      <el-table height="100%" class="text-center" :data="tableData" style="width: 100%;">
        <el-table-column prop="name" label="名称">
          <template slot-scope="scope">
            <router-link
              :to="{name:'课程详情', params: { courseId: scope.row.ID }}"
              v-text="scope.row.name"
            ></router-link>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称">
          <template slot="header">
            <input class="el-input__inner" v-model.lazy="search" placeholder="请输入内容" />
          </template>
          <template slot-scope="scope">
            <el-button type="danger" @click="clickdata(scope.row)" icon="el-icon-delete"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </a-layout-content>
    <adminContentFooter
      v-bind="{handleSizeChange, handleCurrentChange, currentPage, pagesize,data}"
    ></adminContentFooter>
  </a-layout>
</template>

<script>
import {
  asyncaddUsercouser,
  asyncselectUsercourse,
  asyncdeleteUsercourse,
  asyncmessagename
} from "../../../plugins/api.js";
import adminContentFooter from "@/components/admin/admin-content-footer.vue";
import changemodel from "@/components/admin/changemodel";

import { mapGetters } from "vuex";
export default {
  name: "userCourse",
  components: {
    adminContentFooter,
    changemodel
  },
  data() {
    return {
      usercourse: [],
      dialogVisible: false,
      dialogVisibless: false,
      dialogVisibled: false,
      loading: false,
      search: "",
      currentPage: 1,
      pagesize: 20
    };
  },
  computed: {
    ...mapGetters(["getCourse", "getCatebag", "getCoursecatebag", "getUser"]),
    user() {
      return this.getUser.find(v => v.userid == this.userid);
    },
    groupdata() {
      return this.getCoursecatebag.map(({ ID, cid, catebagid }) => {
        return { ID, groupid: catebagid, childid: cid };
      });
    },
    tableData() {
      const { currentPage, pagesize, data } = this;
      return data.slice((currentPage - 1) * pagesize, currentPage * pagesize);
    },
    data() {
      const { selectDate, search } = this;
      return selectDate.filter(data => {
        return (
          !search || data.name.toLowerCase().includes(search.toLowerCase())
        );
      });
    },
    usercourseid() {
      return this.usercourse.map(v => v.course_ID);
    },
    selectDate() {
      const { getCourse, usercourseid } = this;
      return getCourse.filter(v => usercourseid.includes(v.ID));
    }
  },
  watch: {
    userid() {
      this.start();
    }
  },
  props: ["userid"],
  async mounted() {
    this.start();
  },
  methods: {
    handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    async mtmessage() {
      await asyncmessagename({
        phonenum: this.user.phonenum,
        username: this.user.username
      })
        .then(() => {
          this.$message({
            message: "恭喜你，发送成功",
            type: "success"
          });
          this.dialogVisibless = false;
        })
        .catch(() => {
          this.start();
          this.$message.error("错了哦，发送失败");
        });
    },
    async start() {
      try {
        this.usercourse = await asyncselectUsercourse({
          uid: this.user.userid
        });
      } catch (err) {
        console.log(err);
      }
    },
    async clickdata({ ID }) {
      const { userid, usercourse, start } = this;
      const d = usercourse.find(v => v.course_ID == ID);
      if (d) {
        await asyncdeleteUsercourse({ id: d.ID });
      } else {
        await asyncaddUsercouser({
          uid: userid,
          cid: ID
        });
      }
      await start();
      this.$message("修改成功");
    }
  }
};
</script>